<template>
  <div>
    <p class="pinformation" style="margin-top: 7px">方案信息</p>
    <el-form label-width="130" :model="form">
      <el-row>
        <el-col :span="6">
          <el-form-item label="方案编号：">
            <!-- {{ form.projectCode }} -->
            G20230006
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="方案名称：">
            <!-- {{ form.projectName }} -->
            固废浸出-0004
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="委托单位：">
            <!-- {{form.wtCustomName}} -->
            济南水气声土综合测试公司
            </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="受检单位：">
            <!-- {{form.wtCustomName}} -->
            固废浸出
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="方案类型：" label-width="80">
            <!-- <dict-tag :options="sys_contract_type" :value="form.contractType" /> -->
            排污单位自行监测
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="受检单位地址：">
            <City :id="'right'" ref="wtAreaRef" :viewForm="form"
          /></el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="详细地址：">
            <el-input
              v-model="form.sjdz"
              clearable
              maxlength="100"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="受检单位联系人：">
            <el-input
              v-model="form.sjContacts"
              clearable
              maxlength="100"
              placeholder="请输入受检单位联系人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="受检单位联系电话：">
            <el-input
              v-model="form.sjPhonenumber"
              clearable
              maxlength="100"
              placeholder="请输入受检单位联系电话"
            ></el-input
          ></el-form-item>
        </el-col>
        <el-col :span="3">
          <el-row>
            <el-button type="success" style="margin-left: 10px">保存</el-button>
            <el-button type="success" style="margin-left: 10px">提交变更审批</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-row style="border-top: 2px solid #e4e7ed">
      <el-col :span="12" style="padding-right: 5px">
        <p class="pinformation" style="margin-top: 7px">点位搜索条件</p>
        <el-form label-width="80" :model="form">
          <el-row>
            <el-col :span="7">
              <el-form-item label="检测类别：">
                <el-input
                  v-model="form.jclbName"
                  clearable
                  placeholder="请输入检测类别"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点位名称：">
                <el-input
                  v-model="form.pointName"
                  clearable
                  placeholder="请输入点位名称"
                ></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="5">
              <el-row justify="center">
                <el-button type="success" style="margin-left: 10px"
                  >搜索</el-button
                >
                <el-button class="resetBtn" style="margin-left: 10px"
                  >重置</el-button
                >
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin-bottom: 5px">
          <p class="pinformation">点位列表</p>
          <p class="totalStyle">共 {{ tableData.length }} 条数据</p>
          <el-row style="padding-bottom: 5px; margin-left: 10px">
            <el-button link icon="Plus" @click="handleAddPoint">新增</el-button>
          </el-row>
        </el-row>
        <el-table :data="tableData" ref="mainTableRef">
          <el-table-column show-overflow-tooltip align="center" prop="jclbName" label="检测类型" width="120"/>
          <el-table-column show-overflow-tooltip align="center" prop="pointName" label="点位名称" />
          <el-table-column show-overflow-tooltip align="center" prop="pointCode" label="点位编号" width="80"/>
          <el-table-column show-overflow-tooltip align="center" prop="day" label="连测天数" width="80"/>
          <el-table-column show-overflow-tooltip align="center" prop="pc" label="每天频次" width="80"/>
          <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
              <el-button link @click="handleAddPoint">编辑</el-button>
              <el-button link @click="handleAddPoint">复制</el-button>
              <el-button link>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col
        :span="12"
        style="padding: 5px 0 0 5px !important; border-left: 2px #e4e7ed solid"
      >
        <el-tabs v-model="activityName" class="demo-tabs">
          <el-tab-pane label="不分包" name="first">
            <isPackage v-if="activityName == 'first'" />
          </el-tab-pane>
          <el-tab-pane label="分包" name="second">
            <isPackage v-if="activityName == 'second'" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <PointLocationDialog ref="PTDialogRef" :queryPointList="queryPointList"
       v-if="pointDialogDestroy" />
  </div>
</template>

<script setup>
import City from "@/components/City/index.vue";
import PointLocationDialog from "../../../../contract/point/index.vue"

import isPackage from "./isPackage";

const { proxy } = getCurrentInstance();

const {
  sys_contract_type,
} = proxy.useOrgDict(
  "sys_contract_type",
);const form = ref({});
const tableData = ref([
    {jclbName: '地表水', pointName: '厂区东侧1#地表水',pointCode: '1#', day: '2', pc:'2'},
    {jclbName: '地下水', pointName: '厂区东侧1#地下水',pointCode: '2#', day: '1', pc:'1'},
]);
const activityName = ref("first");
const pointDialogDestroy = ref(false)

const heightParams = ref([{ tableName: "main", bottomHeight: 21 }]);

function handleAddPoint() {
  pointDialogDestroy.value = true;
  nextTick(() => {
    proxy.$refs["PTDialogRef"].form.primaryId = '1725401735037100033'
    // 打开新增/编辑检测方法dialog
    proxy.$refs["PTDialogRef"].isShowPTDialog = true
  });
}

function queryPointList(params) {
    
}

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>
